<template>
	<view>
		<u-navbar back-icon-color="#000000" :border-bottom="false" title=""  :background="navbarBG">
		</u-navbar>
		<view :style="'height:'+topHeight+'px;'" 
				class="u-flex u-row-between u-col-center topBox">
			<view  style="width: 580rpx;text-align: left;">
				<view style="font-size: 34rpx;color: #000000;font-weight: bold;">
					<text style="margin-right: 10rpx;">转账给</text>
					<text style="margin-right: 10rpx;">{{targetUser.friendName}}</text>
					<text>({{formatRealName}})</text>
				</view>
				<view  style="font-size:28rpx;color: #909399;width: 580rpx;">
					<text style="margin-right: 10rpx;">微信号:</text>
					<text>{{targetUser.chatNumber}}</text>
				</view>
			</view>
			<view class="u-flex u-row-center u-col-center">
				<view>
					<u-image :src="targetUser.headImg"  mode="aspectFill" width="90" height="90" border-radius="12">
						<view slot="error"
								class="u-flex u-row-center u-col-center  u-p-t-10"
								style="width: 80rpx;height: 80rpx;background-color: #f1f1f1;border-radius: 12rpx;">
							<view>
								<image src="/static/image/default/default-user/default-user.png"
										style="width: 50rpx;height: 50rpx;"></image>
							</view>
						</view>
					</u-image>
				</view>
			</view>
		</view>
		<view :style="'height:'+bodyHeight+'px;'" class="bodyBox">
			<view style="text-align: left;font-size: 28rpx;color: #000000;">
				<text>转账金额</text>
			</view>
			<view class="u-p-t-30 u-p-b-30 u-flex u-row-left u-col-center u-border-bottom">
				<view style="width:80rpx;text-align: left;font-size: 60rpx;font-weight: bold;padding-bottom: 16rpx;">
					<text>￥</text>
				</view>
				<view style="width:400rpx;text-align: left;font-weight: bold;">
					<u-input :adjust-position="false"
					@blur="shopPasswordPop"
					:show-confirmbar="true"
					 v-model="transferAmount"
					:custom-style="customInputStyle" 
					:focus="inputFocus"
					type="number"
					:border="false" 
					:clearable="false" 
					placeholder="" 
					height="80rpx"></u-input>
				</view>
			</view>
			<view style="text-align: left;font-size: 28rpx;color: #909399;margin-top: 30rpx;color: #315b7e;">
				<text @click="showTransferDescPop()">添加转账说明</text>
			</view>
		</view>
		
		<u-popup v-model="transferDescPopFlag" mode="center" border-radius="14" width="100%" height="500rpx">
			<view class="u-p-30">
				<view style="text-align: left;font-size: 28rpx;color: #000000;font-weight: bold;">
					<text>转账说明</text>
				</view>
				<view class="u-p-20">
					<view 	class="u-flex u-row-between u-col-center u-m-t-40"
							style="background-color: #f3f3f3;border-radius:10rpx;padding:30rpx;">
						<view style="width: 500rpx;">
							<u-input :focus="descInputFocus"
							v-model="transferRemark"
							type="text"
							:border="false" 
							:clearable="false" 
							placeholder="首付款双方可见,最多60个字" 
							height="50rpx"></u-input>
						</view>
						<view>
							<u-icon name="map" color="#909399" :size="42"></u-icon>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-around u-col-center u-m-t-40 u-p-40">
					<view style="width: 40%;">
						<u-button type="info" @click="cancelRemark()">取消</u-button>
					</view>
					<view style="width: 40%;">
						<u-button type="success" @click="confirmRemark()">确定</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="passwordPopFlag" mode="bottom" border-radius="14" length="70%"
				:mask-close-able="false">
			<view class="u-p-30">
				<view>
					<view class="u-flex u-row-between">
						<view style="width: 100rpx;" @click="closePwdPop">
							<u-icon name="close"></u-icon>
						</view>
						<view v-if="pwdErrorTips.length>0" 
							style="text-align: center;color: #FC5531;font-size: 34rpx">
							{{pwdErrorTips}}
						</view>
						<view v-else style="text-align: center;font-weight: bold;font-size: 32rpx;">
							<text>请输入支付密码</text>
						</view>
						<view style="width: 100rpx;">
							<text></text>
						</view>
					</view>
				</view>
				<view class="u-m-t-40 u-p-b-30  u-border-bottom" style="text-align: center;font-size: 18px;">
					<view>
						<text>向{{targetUser.friendName}}</text>
						<text style="margin-right: 20rpx;margin-left: 20rpx;">({{formatRealName}})</text>
						<text>转账</text>
					</view>
					<view style="font-weight: bold;margin-top: 20rpx;font-size: 50rpx;">
						<text style="margin-right: 6rpx;">¥</text><text style="font-size: 26px;">{{valueFormat()}}</text>
					</view>
				</view>
				<view class="u-m-t-50">
					<view class="u-flex u-row-between u-col-center u-m-t-20 u-m-b-20 u-tips-color">
						<view class="u-tips-color">
							<text>付款方式</text>
						</view>
						<view class="u-flex u-row-center u-col-center">
							<view>
								<u-image src="/static/image/mycenter/default-record-icon.jpg" width="40rpx" height="40rpx"></u-image>
							</view>
							<view class="u-m-l-5 u-m-r-5"><text>零钱</text></view> 
							<view>
								<u-icon name="arrow-down" :size="28"></u-icon>
							</view>
						</view>
					</view>
					<u-message-input :breathe="true"  :maxlength="6" :dot-fill="true" 
								@change="inputChange" @finish="inputFinish" :focus="pwdFocus">
					</u-message-input>
				</view>
			</view>
		</u-popup>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chatGroupId:'',
				targetUser:{
					id:'',
					userName:'',
					headImg:''
				},
				formatRealName:'',
				navbarBG:{
					backgroundColor: '#F0F0F0',
				},
				topHeight:0,
				bodyHeight:0,
				customInputStyle:{
					fontSize:'80rpx',
					//fontWeight:'bold',
				},
				transferAmount:'',
				inputFocus:false,
				transferDescPopFlag:false,
				descInputFocus:false,
				transferRemark:'',
				passwordPopFlag:false,
				pwdFocus:false,
				pwdErrorTips:'',
			};
		},
		created:function(){
			this.topHeight=this.$u.sys().windowHeight*0.13;	
			this.bodyHeight=this.$u.sys().windowHeight*0.77;	
		},
		onLoad:function(option){
			let that=this;
			this.chatGroupId= option.chatGroupId;
			this.targetUser.userName= option.targetUserName;
			this.targetUser.headImg= option.targetUserAvatar;
			this.targetUser.id=option.targetUserId;
			console.log("对方用户id",this.targetUser.id);
			if(this.targetUser.id){
				this.getFriendInfo();
			}
		},
		methods:{
			//获取朋友信息
			getFriendInfo:function(){
				let that=this;
				let obj={
					friendId:that.targetUser.id
				};
				that.$u.api.imUser.getFriendInfo(obj).then(res => {
				  if (res!=null&&res.data!=null&&res.code===200) {
						let realName=res.data.realName;
						that.targetUser=res.data;
						console.log("转账对方信息",that.targetUser);
						if(realName){
							that.fromatRealName(realName);
						}
						that.$nextTick(function(){
							that.inputFocus=true;
						})
				  }else{
				    uni.hideLoading();
				    return;
				  }
				}).catch(res => {
				  uni.hideLoading();
				})
			},
			//格式化真实姓名
			fromatRealName:function(realName){
				let newStr="";
				let charArr=realName.split("");
				for (var i = 0; i < charArr.length; i++) {
					let char= charArr[i];
					if(i==charArr.length-1){
						newStr=newStr+char;
					}else{
						newStr=newStr+"*";
					}
				}
				this.formatRealName=newStr;
			},
			//打开备注弹窗
			showTransferDescPop:function(){
				let that=this;
				that.inputFocus=false;
				that.transferDescPopFlag=true;
				this.passwordPopFlag=false;
				this.pwdErrorTips="";
				setTimeout(function(){
					that.$nextTick(function(){
						that.descInputFocus=true;
					})
				},300)
				
			},
			//取消备注
			cancelRemark:function(){
				let that=this;
				that.transferDescPopFlag=false;
				that.descInputFocus=false;
				setTimeout(function(){
					that.$nextTick(function(){
						that.inputFocus=true;
						that.transferRemark="";
					})
				},200)
			},
			//确认备注
			confirmRemark:function(){
				let that=this;
				that.transferDescPopFlag=false;
				that.descInputFocus=false;
				setTimeout(function(){
					that.$nextTick(function(){
						that.inputFocus=true;
					})
				},200)
			},
			shopPasswordPop:function(){
				let that=this;
			
				setTimeout(function(){
					if(that.transferDescPopFlag==true){
						console.log("备注框打开着");
						return;
					}else{
						if(that.transferAmount.length<1||that.transferAmount<=0){
							uni.showToast({
								icon:'error',
								title:'请先填写金额'
							})
							return;
						};
						that.passwordPopFlag=true;
						that.pwdErrorTips="";
						setTimeout(function(){
							that.pwdFocus=true;
						},300)
					}
				},300)
			},
			valueFormat:function(){
				if(this.transferAmount.length<1){
					return "0.00"
				}
				if(this.transferAmount.toString().indexOf(".")==-1){
					return this.transferAmount+'.00';
				}else{
					return this.transferAmount;
				}
			},
			closePwdPop:function(){
				this.pwdErrorTips="";
				this.passwordPopFlag=false;
				this.pwdFocus=false;
			},
			inputChange(e){
				this.pwdErrorTips="";
			},
			inputFinish(e) {
				let that=this;
				console.log('输入结束，当前值为：' + e);
				let param={
					accountBalance:this.transferAmount,
					tradePwd:e
				};
				that.$u.api.imUser.validateTradePwd(param).then(res => {
					console.log("交易密码校验结果",res);
					if(res.code==200){
						this.submit();
					}else{
						let message=res.message?res.message:'支付密码错误';
						this.globalUtil.utilAlert(message);
						this.pwdErrorTips=message;
						return;
					}
				})
			},
			submit:function(){
				let that=this;
				let param={
					transferRemark:this.transferRemark.length>0?this.transferRemark:'你发起了一笔转账',
					transferAmount:this.transferAmount,
					receiveAllFlag:false,
					fromUserId:that.vuex_userInfo.id,
					fromUseName:that.vuex_userInfo.userName,
					chatGroupId:that.chatGroupId,
					transferType:1,
					targetUser:that.targetUser
				};
				this.$u.api.chatGroup.sendTransfer(param).then(res => {
					if(res.code==200){
						console.log("用户账户记录已发生变化",res);
						let tradeRecord= res.data;
						param.tradeRecord=tradeRecord;
						let timestamp= new Date().getTime();
						let message = {
							"id": new Date().getTime() + "",
							"chatGroupId": that.chatGroupId,
							"userId": that.vuex_userInfo.id,
							"meFlag": true,
							"userName": that.vuex_userInfo.userName,
							"userAvatar": that.vuex_userInfo.avatar ? that.vuex_userInfo.avatar :
								"/static/image/default/default-user/default-user.png",
							'messageType': that.messageApi.MSG_TYPE.USER_MSG,
							"contentType": that.messageApi.CONTENT_TYPE.TRANSFER_CONTENT_TYPE,
							"content":param,
							"createTime": that.globalUtil.getTimeStr(timestamp),
							"timestamp": timestamp,
							"platFrom": this.messageApi.msgPlat,
							"showTimeFlag": true,
						}
						console.log("发送信息", message);
						/*
							这里发送信息到后端，然后收到信息了放入缓存中
						*/
						that.globalWX.sendMessage(message, {
							complete: function(res) {
								console.log("=======已发送==========", res);
								if (res == true) {
									uni.navigateBack();
								} else {
									that.globalUtil.utilAlert("网络故障，稍后重试！");
									return;
								}
							}
						},that.messageApi.BUSINESS_CODE.chatting);
					}else{
						that.globalUtil.utilAlert("服务异常");
						return;
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.topBox{
	text-align: center;
	background-color: #f0f0f0;
	padding: 30rpx 40rpx;
	padding-left: 50rpx;
	width: 100%;
}
.bodyBox{
	background-color: #ffffff;
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
	padding: 40rpx 50rpx;
}
</style>
<style>
	page{
		background-color: #f0f0f0;
	}
</style>
